<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码 - 知籁平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        .user-sidebar {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
        }
        .user-sidebar .nav-link {
            color: #495057;
            border-radius: 5px;
            padding: 10px 15px;
            margin-bottom: 5px;
        }
        .user-sidebar .nav-link:hover {
            background-color: #e9ecef;
        }
        .user-sidebar .nav-link.active {
            background-color: #007bff;
            color: #fff;
        }
        .user-sidebar .nav-link i {
            width: 20px;
            text-align: center;
            margin-right: 8px;
        }
        .password-card {
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        .avatar-container {
            width: 120px;
            height: 120px;
            margin: 0 auto 20px;
            overflow: hidden;
            border-radius: 50%;
            border: 5px solid #f8f9fa;
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        }
        .avatar-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .progress {
            height: 5px;
        }
        .password-strength-text {
            font-size: 12px;
        }
        .alert {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <header th:replace="common/header :: header"></header>

    <div class="container mt-4 mb-5">
        <div class="row">
            <!-- 左侧边栏 -->
            <div class="col-md-3 mb-4">
                <div class="user-sidebar">
                    <div class="text-center mb-4">
                        <div class="avatar-container">
                            <img id="avatarImg" src="/static/images/default-avatar.png" alt="用户头像">
                        </div>
                        <h5 id="userNickname">用户昵称</h5>
                        <p class="text-muted" id="userLevel">普通用户</p>
                    </div>
                    
                    <div class="nav flex-column nav-pills">
                        <a class="nav-link" href="/user/profile">
                            <i class="fa fa-user"></i> 个人资料
                        </a>
                        <a class="nav-link" href="/user/downloads">
                            <i class="fa fa-download"></i> 下载历史
                        </a>
                        <a class="nav-link" href="/user/collections">
                            <i class="fa fa-star"></i> 我的收藏
                        </a>
                        <a class="nav-link" href="/user/requests">
                            <i class="fa fa-list"></i> 我的请求
                        </a>
                        <a class="nav-link active" href="/user/change-password">
                            <i class="fa fa-lock"></i> 修改密码
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 右侧内容区 -->
            <div class="col-md-9">
                <!-- 修改密码卡片 -->
                <div class="card password-card">
                    <div class="card-header">
                        <h5 class="mb-0">修改密码</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-success" id="successAlert">密码修改成功</div>
                        <div class="alert alert-danger" id="errorAlert"></div>
                        
                        <form id="passwordForm">
                            <div class="form-group">
                                <label for="oldPassword">当前密码</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fa fa-lock"></i></span>
                                    </div>
                                    <input type="password" class="form-control" id="oldPassword" name="oldPassword" 
                                           placeholder="请输入当前密码" required>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="newPassword">新密码</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fa fa-key"></i></span>
                                    </div>
                                    <input type="password" class="form-control" id="newPassword" name="newPassword" 
                                           placeholder="请输入新密码" required minlength="6">
                                </div>
                                <small class="form-text text-muted">密码至少6个字符</small>
                                <div class="mt-2">
                                    <div class="d-flex justify-content-between">
                                        <span>密码强度:</span>
                                        <span class="password-strength-text" id="strengthText">弱</span>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar bg-danger" id="passwordStrength" style="width: 0%"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="confirmPassword">确认新密码</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fa fa-key"></i></span>
                                    </div>
                                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" 
                                           placeholder="请再次输入新密码" required>
                                </div>
                                <div class="invalid-feedback" id="confirmPasswordError">两次密码输入不一致</div>
                            </div>
                            
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-check mr-2"></i>修改密码
                                </button>
                            </div>
                        </form>
                        
                        <div class="mt-4">
                            <h6>密码安全提示</h6>
                            <ul class="text-muted">
                                <li>密码至少6个字符</li>
                                <li>建议使用字母、数字和特殊字符的组合</li>
                                <li>不要使用容易被猜到的密码，如生日、姓名等</li>
                                <li>定期更换密码可以提高账户安全性</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 加载用户信息
            loadUserInfo();
            
            // 密码强度检测
            $('#newPassword').on('input', function() {
                const password = $(this).val();
                let strength = 0;
                
                // 长度检查
                if (password.length >= 6) strength += 20;
                if (password.length >= 8) strength += 20;
                
                // 包含数字
                if (/\d/.test(password)) strength += 20;
                
                // 包含小写字母
                if (/[a-z]/.test(password)) strength += 20;
                
                // 包含大写字母或特殊字符
                if (/[A-Z]/.test(password) || /[^a-zA-Z0-9]/.test(password)) strength += 20;
                
                // 更新进度条
                $('#passwordStrength').css('width', strength + '%');
                
                // 更新文本和颜色
                if (strength < 40) {
                    $('#passwordStrength').removeClass().addClass('progress-bar bg-danger');
                    $('#strengthText').text('弱');
                } else if (strength < 70) {
                    $('#passwordStrength').removeClass().addClass('progress-bar bg-warning');
                    $('#strengthText').text('中');
                } else {
                    $('#passwordStrength').removeClass().addClass('progress-bar bg-success');
                    $('#strengthText').text('强');
                }
            });
            
            // 确认密码验证
            $('#confirmPassword').on('input', function() {
                if ($(this).val() !== $('#newPassword').val()) {
                    $(this).addClass('is-invalid');
                    $('#confirmPasswordError').show();
                } else {
                    $(this).removeClass('is-invalid');
                    $('#confirmPasswordError').hide();
                }
            });
            
            // 表单提交
            $('#passwordForm').submit(function(e) {
                e.preventDefault();
                
                // 隐藏之前的提示
                $('.alert').hide();
                
                // 表单验证
                if ($('#newPassword').val() !== $('#confirmPassword').val()) {
                    $('#confirmPassword').addClass('is-invalid');
                    $('#confirmPasswordError').show();
                    return;
                }
                
                // 发送修改密码请求
                $.ajax({
                    url: '/api/user/change-password',
                    type: 'POST',
                    data: {
                        oldPassword: $('#oldPassword').val(),
                        newPassword: $('#newPassword').val()
                    },
                    success: function(response) {
                        if (response.status === 200) {
                            // 修改成功
                            $('#successAlert').show();
                            $('#passwordForm')[0].reset();
                            $('#passwordStrength').css('width', '0%').removeClass().addClass('progress-bar bg-danger');
                            $('#strengthText').text('弱');
                        } else {
                            // 显示错误信息
                            $('#errorAlert').text(response.message).show();
                        }
                    },
                    error: function(xhr) {
                        // 显示错误信息
                        let errorMsg = '修改失败，请稍后重试';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        $('#errorAlert').text(errorMsg).show();
                    }
                });
            });
            
            // 加载用户信息
            function loadUserInfo() {
                $.ajax({
                    url: '/api/user/info',
                    type: 'GET',
                    success: function(response) {
                        if (response.status === 200) {
                            const user = response.data;
                            $('#userNickname').text(user.nickname || user.username);
                            $('#userLevel').text(user.accountLevel);
                            if (user.avatar) {
                                $('#avatarImg').attr('src', user.avatar);
                            }
                        }
                    }
                });
            }
        });
    </script>
</body>
</html> 